
<template>
  <div class="task-list-container">
    <h1>我的任务列表</h1>
    
    <!-- 顶部操作区：搜索框 + 按钮组 -->
    <div class="top-actions">
      <!-- 搜索框（宽度调整为 70%） -->
      <div class="search-container">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索任务..." 
          class="search-input"
        >
        <button @click="clearSearch" class="clear-btn">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 按钮组 -->
      <div class="button-group">
        <button class="recycle-btn" @click="goToRecycleBin">前往回收站</button>
        <button class="add-task-btn" @click="goToAddTask">添加任务</button>
      </div>
    </div>
    
    <!-- 任务统计卡片 -->
    <div class="stats-container">
      <div class="stat-card pending">
        <div class="stat-value">{{ filteredPendingCount }}</div>
        <div class="stat-label">未完成任务</div>
      </div>
      <div class="stat-card completed">
        <div class="stat-value">{{ filteredCompletedCount }}</div>
        <div class="stat-label">已完成任务</div>
      </div>
    </div>
    
    <!-- 搜索结果提示 -->
    <div v-if="searchQuery && filteredTasks.length === 0" class="no-results">
      <p>没有找到与 "{{ searchQuery }}" 相关的任务</p>
    </div>
    
    <!-- 任务列表 -->
    <div 
      v-for="task in filteredTasks" 
      :key="task.id" 
      class="task-item"
    >
      <!-- 任务内容保持不变 -->
      <div :class="{ 'task-done': task.isDone }">
        <h3>{{ task.title }}</h3>
        <p>描述：{{ task.desc }}</p>
        <p>优先级：{{ task.priority }}</p>
        <p>截止日期：{{ task.deadline }}</p>
      </div>
      <div class="task-actions">
        <button @click="toggleDone(task.id)">
          {{ task.isDone ? '标记为未完成' : '标记为完成' }}
        </button>
        <button @click="deleteToRecycle(task.id)">删除</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 逻辑部分保持不变，无需修改
import { computed, ref } from 'vue';
import { useTaskStore } from '@/store/taskStore';
import { useRouter } from 'vue-router';

const taskStore = useTaskStore();
const router = useRouter();

const searchQuery = ref('');
const allTasks = computed(() => taskStore.tasks);

const filteredTasks = computed(() => {
  if (!searchQuery.value.trim()) return allTasks.value;
  
  const query = searchQuery.value.toLowerCase().trim();
  return allTasks.value.filter(task => 
    task.title.toLowerCase().includes(query) || 
    task.desc.toLowerCase().includes(query)
  );
});

const filteredPendingCount = computed(() => 
  filteredTasks.value.filter(task => !task.isDone).length
);

const filteredCompletedCount = computed(() => 
  filteredTasks.value.filter(task => task.isDone).length
);

const clearSearch = () => {
  searchQuery.value = '';
};

const goToRecycleBin = () => router.push('/recycle-bin');
const goToAddTask = () => router.push('/add-task');

const toggleDone = (id: number) => {
  taskStore.toggleTaskStatus(id);
};

const deleteToRecycle = (id: number) => {
  taskStore.deleteTaskToRecycle(id);
};
</script>

<style scoped>
.task-list-container {
  max-width: 800px;
  margin: 30px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 顶部操作区：搜索框 + 按钮组 */
.top-actions {
  display: flex;
  flex-direction: column;/*弹性盒子*/
  gap: 15px;
  margin-bottom: 20px;
}

/* 搜索框样式调整 */
.search-container {
  position: relative;
  width: 70%; /* 搜索框宽度调整为父容器的 70% */
  margin: 0 auto; /* 水平居中 */
}

.search-input {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
  border-color: #4CAF50;
}

.clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
}

.clear-btn:hover {
  color: #333;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 10px;
  justify-content: center; /* 按钮组居中显示 */
}

.recycle-btn, .add-task-btn {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.recycle-btn {
  background-color: #6c757d;
  color: white;
}

.add-task-btn {
  background-color: #4CAF50;
  color: white;
}

.recycle-btn:hover, .add-task-btn:hover {
  opacity: 0.9;
}

/* 统计卡片样式 */
.stats-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pending {
  background-color: #ff6b6b;
}

.completed {
  background-color: #4ecdc4;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

/* 其他样式保持不变 */
.no-results {
  text-align: center;
  padding: 30px;
  color: #666;
  font-size: 16px;
}

.task-item {
  margin-bottom: 15px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.task-done {
  text-decoration: line-through;
  opacity: 0.6;
}

.task-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
</style>